<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/personal.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .main .main_sidebar {
            height: 606px;
            background-color: #f8f8f8;
        }

        .main_sidebar .main_sidebar_top {
            width: 100%;
            height: 226px;
            background-color: #fff;
            padding-top: 19px;
        }

        .main_sidebar .main_sidebar_top_center {
            width: 96px;
            height: 203px;
            margin-left: 29.166666%;
            text-align: center;
        }

        .main_sidebar .main_sidebar_top_center strong {
            display: block;
            width: 100%;
            height: 58px;
            font: 24px/58px "simhei";
            color: #57c7f6;
        }

        .main_sidebar .main_sidebar_top_center img {
            display: block;
            width: 100%;
        }

        .main_sidebar .main_sidebar_top_center span {
            display: block;
            width: 100%;
            height: 37px;
            font: 500 15px/37px "simhei";
        }

        .main_sidebar .main_sidebar_bottom {
            width: 100%;
            height: 344px;
            margin-top: 2px;
            padding-top: 15px;
            background-color: #fff;
        }

        .main_sidebar_bottom_center {
            width: 100%;
            height: 100%;
            text-align: center;
            font: 600 14px/30px "simhei";
        }

        .main_sidebar_bottom_center li {
            height: 30px;
            position: relative;
        }

        .main_sidebar_bottom_center li span {
            display: inline-block;
            cursor: pointer;
        }

        .main_sidebar_bottom_center li span.active {
            color: #57c7f6;
        }

        li .diamond {
            width: 8px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #57c7f6;
            display: none;
        }

        .main_sidebar_bottom_center :nth-of-type(2) {
            margin-top: 11px;
        }

        .main_sidebar_bottom_center :nth-of-type(3) {
            margin-top: 17px;
        }

        .main_sidebar_bottom_center :nth-of-type(4) {
            margin-top: 15px;
        }

        .main_content {
            height: 606px;
            /* height: 1080px; */
            /* overflow: hidden; */
        }

        .main_content iframe {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="header_up">
            <h2>YOUR LOGO</h2>
            <label class="header_up_lab"><span class="fa fa-search"></span><input type="text"
                    placeholder="请输入科室名/医生名/疾病名" class="text"></label>
            <input type="text" value="搜索" class="search">
            <p class="adm"><a href=""> <span class="fa fa-user"></span>&nbsp;/ 管理员登录</a></p>
        </div>
    </header>
    <nav>
        <div class="nav_a">
            <a href="../首页.html" >首页</a>
            <a href="../appointment.html">预约挂号</a>
            <a href="../Onlinevisit.html">在线问诊</a>
            <a href="./index.html" class="active">个人中心</a>
            <a href="../healthinquiry.html">健康咨询</a>
            <a href="../illnessinquiry.html">疾病专题</a>
        </div>
    </nav>
    <div class="main clear">
        <div class="main_top clear">
            <span>当前位置：首页 > </span>
            <strong>个人中心</strong>
        </div>
        <div class="main_sidebar">
            <div class="main_sidebar_top">
                <div class="main_sidebar_top_center">
                    <strong>个人中心</strong>
                    <img src="../img/矩形 58.png" alt="">
                    <span>你好，Tony！</span>
                </div>
            </div>
            <div class="main_sidebar_bottom">
                <ul class="main_sidebar_bottom_center">
                    <li><span>基本信息</span>
                        <div class="diamond"></div>
                    </li>
                    <li><span>我的预约</span>
                        <div class="diamond"></div>
                    </li>
                    <li><span>我的病例</span>
                        <div class="diamond"></div>
                    </li>
                    <li><span>我的处方</span>
                        <div class="diamond"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main_content" id="content">
            <iframe src="" frameborder="0" id="ofm" name="ofmName"></iframe>
        </div>
    </div>
    <footer>
        <div class="footer_up">
            <div class="footer_up_con">
                <div class="footer_up_con_fir">
                    <p class="footer_up_con_fir1">
                        <a href="">联系我们</a>
                        <span>Content us</span>
                    </p>
                    <p class="footer_up_con_fir2">关注</p>
                    <p class="footer_up_con_fir3">您身边的家庭医生</p>
                </div>
                <div class="footer_up_con_two">
                    <div class="footer_up_con_two_img">
                        <span><img src="../img/weibo.png" alt=""></span>
                        <span><img src="../img/weixin.png" alt=""></span>
                        <span><img src="../img/qq.png" alt=""></span>
                    </div>
                    <div class="footer_up_con_two_adress">
                        <p>地址: 北京市朝阳区国贸写字楼B座</p>
                        <p>电话: 400612358</p>
                        <p>邮箱: infor@abgj.com</p>
                    </div>
                    <div class="footer_up_con_two_phone">
                        <p>邮编: 400160</p>
                        <p>手机: 138466066</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="footer_end">
            <p>京公网安备11010125610012号京ICP证150277号京ICP备15002532号</p>
        </div>
    </footer>
</body>
<script>
    window.onload = function () {
        if(!localStorage.getItem("onload")){
            window.location.href="../登录.html";
        }
        var arr = ["./personal.html","./order.html","./case.html","./recipel.html"];
        pageNum = localStorage.getItem( "pageNum" ) || 0;
        var oMainSpan = document.getElementsByClassName("main_sidebar_bottom_center")[0].getElementsByTagName("span");
        var oDiamond = document.getElementsByClassName("diamond");
        var oiFrame = document.getElementById("ofm");
        var oMainContent = document.getElementsByClassName("main_content")[0];
        oiFrame.src = arr[pageNum];
        for (var i = 0; i < oMainSpan.length; i++) {
            oMainSpan[i].className = "";
        }
        oMainSpan[pageNum].className = "active";
        for (var i = 0; i < oDiamond.length; i++) {
            oDiamond[i].style.display = "";
        }
        oDiamond[pageNum].style.display = "block";
        for (var i = 0; i < oMainSpan.length; i++) {
            oMainSpan[i].index = i;
            oMainSpan[i].onclick = function () {
                localStorage.setItem( "pageNum",this.index );
                for (var j = 0; j < oMainSpan.length; j++) {
                    oMainSpan[j].className = "";
                }
                this.className = "active";
                for (var j = 0; j < oDiamond.length; j++) {
                    oDiamond[j].style.display = "";
                }
                oDiamond[this.index].style.display = "block";
            }
        }
        oMainSpan[0].addEventListener("click", function () {
            oiFrame.src = "./personal.html";
            oMainContent.style.height = '606px';
            oMainContent.style.marginTop = '36px';
        });
        oMainSpan[1].addEventListener("click", function () {
            oiFrame.src = "./order.html";
            oMainContent.style.height = '606px';
            oMainContent.style.marginTop = '36px';
        });
        oMainSpan[2].addEventListener("click", function () {
            oiFrame.src = "./case.html";
            oMainContent.style.height = '606px';
            oMainContent.style.marginTop = '36px';
        });
        oMainSpan[3].addEventListener("click", function () {
            oiFrame.src = "./recipel.html";
            oMainContent.style.height = '606px';
            oMainContent.style.marginTop = '36px';
        });
    }
</script>

</html>